<div id="app" >
    <admin-page-header> 
        
    </admin-page-header>

    <div class="container">
        <div class="row g-2">
            <div class="col-12">
                <bi-card title="搜索">
                    <div class="row g-3">
                        <div class="col-12 col-sm-6 col-lg-6">
                             <bi-select v-model="search.status" placeholder="状态" :option="$pageData.statusOption" ></bi-select>
                        </div>
                        
                        <div class="col-12 col-sm-6 col-lg-6">
                            <bi-input v-model="search.keyword"  placeholder="用户手机号" icon="fa fa-search" ></bi-input>
                        </div>
                    </div>
                </bi-card>
            </div>
            <div class="col-12">
                <bi-card title="订单列表">
                    <bi-table :data="list" :loading="loading"  min-height="300" >
                        <bi-table-column label="状态" name="status" width="60" v-slot="{row}" >
                            {{$pageData.statusOption[row.status]??row.status}}
                        </bi-table-column>
                        <bi-table-column label="订单号/时间" name="order_id" width="180" >
                            <template v-slot="{row}">
                                <div>
                                    <div>{{row.order_id}}</div>
                                    <div class="time">{{row.created_at}}</div>
                                </div>
                            </template>
                        </bi-table-column>
                        <bi-table-column label="用户" name="member_mobile" width="120" ></bi-table-column>
                        <bi-table-column label="商品" name="goods_name" v-slot="{row}">
                            <div class="goods-list">
                                <div class="goods-item border" style="padding: 2px;" v-for="(item,index) in row.goods" :key="item.goods_id" >
                                    <img :src="$uploadUrl(item.picture)" width="50" height="50" :alt="item.title" :title="item.title" />
                                </div>
                            </div>
                        </bi-table-column>
                        <bi-table-column label="件数" name="goods_num" width="80" ></bi-table-column>
                        <bi-table-column label="收货信息" width="250" v-slot="{row}" >
                            <div>
                                <div>  {{row.address_contacts}} </div>
                                <div>  {{row.address_phone}} </div>
                                <div>  {{row.address_area}} {{row.address_detail}} </div>
                            </div>
                        </bi-table-column>
                        <bi-table-column label="金额"  width="150" v-slot="{row}" >
                            <div>
                                <div> <span>总价</span> {{row.money_total}} </div>
                                <div> <span>运费</span> {{row.money_freight}} </div>
                                <div> <span>支付</span> {{row.money_pay}} </div>
                            </div>
                        </bi-table-column>
                        <bi-table-column label="支付方式" name="payment_way" width="80" ></bi-table-column>
                        
                        <bi-table-column label="操作" width="120" v-slot="{row}">
                                <bi-button type="primary" @click="handleDetail(row)">查看详情</bi-button>
                        </bi-table-column>
                    </bi-table>

                    <template #footer> 
                        <bi-pagination v-model="page" :total="total" :count="count" ></bi-pagination>
                    </template>
                </bi-card>
            </div>
        </div>
    </div>
</div>


<script>
import {debounce} from '@@/admin/assets/js/global.js';
import detialDialog from './order/orderDetailDialog.vue';
let app = admin.createApp({
    data(){
        let search  = {
            status:'',
            keyword:'',
        }


        this.$assign(search,this.$status.get('search'));

        return {
            search,
            list:[],
            loading:false,
            page:this.$status.get('page')??1,
            statusList:this.$pageData.statusList,
            total:0,
            count:0
        }
    },
    watch:{
        search:{
            handler:debounce(function(val){
                
                this.refresh();
            },1000),
            deep:true
        }       
    },
    methods:{
        refresh(){
            this.loading = true;
            this.$status.set('page',this.page);
            this.$status.set('search',this.search);

            this.$ajax({
                url:this.$url({action:'list'}),
                data:{
                    page_current:this.page,
                    ...this.search
                },
                success:(res)=>{
                     
                    this.list = res.list;
                    this.count  = res.count;
                    this.total =res.total;
                },
                over:()=>{
                    this.loading = false;
                }
            })
        },
        handleDetail(item){
            this.$dialog({
                type:"vue",
                content:admin.createApp(detialDialog,{id:item.order_id})
            });
        }
    },
    mounted(){
        this.refresh();
    }
}).mount('#app');
</script>

<style>
.goods-list{
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.goods-item{
    
    padding: 2px;
    position: relative;
}

.time{
    color: #999;
    font-size: 14px;
}

</style>